<template>
<!-- 这是服务器统计 -->
<div class="block" v-loading="loading" element-loading-text="拼命加载中">
    <div class="tableBorder">
    <span class="demonstration">查询时间: &nbsp;</span>
    <el-date-picker style="margin-bottom: 15px;" v-model="headerData.searchTime  " default-value type="date" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="开始日期">
    </el-date-picker>
    <span class="demonstration">对比时间: &nbsp;</span>
    <el-date-picker style="margin-bottom: 15px;" v-model="headerData.compTime" default-value type="date" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="对比时间">
    </el-date-picker>
    <el-select size="small" v-model="headerData.serverId" filterable placeholder="接口名称">
        <el-option v-for="item in headerData.serverIdOptions" :key="item.serverId" :label="item.serverName" :value="item.serverId">
        </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
    </div>
    <chart-modal :chartkey="chartOptionKeys.chart01" style="margin-top:10px;" v-bind:option="chartoptions.dataall" :chartConfig="chartConfig"></chart-modal>
    <!-- 无对比时间 -->
    <div v-show="comType == 'tableData'">
        <div class="tableBorder">
            <el-table :data="tableData" border style="margin:10px 0px 10px 0px;">
                <el-table-column prop="hour" label="时间"></el-table-column>
                <el-table-column prop="searchSetupNum" label="安装量"></el-table-column>
                <el-table-column prop="searchOpenNum" label="打开次数"></el-table-column>
                <el-table-column prop="searchSetupRate" label="安装率(%)"></el-table-column>
            </el-table>
        </div>
    </div>
    <!-- 有对比时间 -->
    <div v-show="comType == 'comTableData'">
        <div class="tableBorder">
            <el-table :data="comTableData" border style="margin:10px 0px 10px 0px;">
                <el-table-column prop="hour" label="时间"></el-table-column>
                <el-table-column label="安装量">
                    <el-table-column prop="searchSetupNum" :label="currentsearchTime"></el-table-column>
                    <el-table-column prop="compSetupNum" :label="tempCompTime"></el-table-column>
                    <el-table-column prop="setupChange" label="变化情况(%)"></el-table-column>
                </el-table-column>
                <el-table-column label="打开次数">
                    <el-table-column prop="searchOpenNum" :label="currentsearchTime"></el-table-column>
                    <el-table-column prop="compOpenNum" :label="tempCompTime"></el-table-column>
                    <el-table-column prop="openChange" label="变化情况(%)"></el-table-column>
                </el-table-column>
                <el-table-column label="安装率(%)">
                    <el-table-column prop="searchSetupRate" :label="currentsearchTime"></el-table-column>
                    <el-table-column prop="compSetupRate" :label="tempCompTime"></el-table-column>
                    <el-table-column prop="setupRateChange" label="变化情况(%)"></el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>
</template>

<script>
import ChartModal from './ChartModal';
import {
    setdataAll01,
    getMax
} from '../config/setChart.js';
import {
    getChartConfig
} from '../config/toolsui.config.js';

export default {
    data() {
        let showDate = new Date();
        let seperator = '-';
        let year = showDate.getFullYear();
        let month = showDate.getMonth() + 1;
        let day = showDate.getDate();
        var strDate = showDate.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator + month + seperator + strDate;
        return {
            pageRenderURL: '' + this.$store.state.domain + '/bzDCP/pageRender/all/server',
            statisticURL: '' + this.$store.state.domain + '/bzDCP/server/statistic',
            comTableData: [],
            tableData: [],
            comType: 'tableData',
            currentsearchTime: '',
            tempCompTime: '',
            headerData: {
                searchTime: currentdate,
                compTime: '',
                serverIdOptions: [],
                inetrface: '',
            },
            chartoptions: {
                dataall: {},
            },
            chartConfig: getChartConfig('100%', '500px'),
            chartOptionKeys: {
                chart01: 'chart01',
            },
            loading: true
        }
    },
    components: {
        ChartModal
    },
    created() {
        this.initDataAll();
    },
    methods: {
        initDataAll() {
            this.$store.state.chartOption = {
                chart01: {},
            };
            this.getData();
        },
        getDataSearch(response) {
            let initialData = response.data;
            this.tableData = initialData;
            this.comTableData = initialData;
            this.total = response.data.total;
            var legends = [];
            var searchOpen = [];
            var searchSetup = [];
            var compOpen = [];
            var compSetup = [];
            for (var i = 0; i < response.data.length; i++) {
                legends[i] = response.data[i].hour;
                searchOpen[i] = response.data[i].searchOpenNum;
                searchSetup[i] = response.data[i].searchSetupNum;
                compOpen[i] = response.data[i].compOpenNum;
                compSetup[i] = response.data[i].compSetupNum;
            }
            var setMaxs = getMax([searchOpen, searchSetup, compOpen, compSetup]);
            this.$store.state.chartOption['chart01'] = setdataAll01(legends.reverse(), [{
                        name: '打开次数',
                        type: 'line',
                        data: searchOpen.reverse()
                    },
                    {
                        name: '安装次数',
                        type: 'line',
                        data: searchSetup.reverse()
                    },
                    {
                        name: '打开次数1',
                        type: 'line',
                        data: compOpen.reverse()
                    },
                    {
                        name: '安装次数1',
                        type: 'line',
                        data: compSetup.reverse()
                    }
                ],
                '',
                [{
                    name: '',
                    formatter: '',
                    max: setMaxs
                }]
            );
            this.$store.state.chartOption['chart01'].legend.selected = {
                "打开次数1": false,
                "安装次数1": false
            }
        },
        getData() {
            let _this = this.headerData;
            this.loading = false;
            this.$ajax.post(this.pageRenderURL, this.qs.stringify({}))
                .then((response) => {
                    if (response.status == 200) {
                        _this.serverIdOptions = response.data.server;
                    } else {
                        this.$message.warning('网络错误!');
                        return;
                    }
                }).catch((err) => {
                    console.log(err);
                });
            this.loading = false;
            this.$ajax.post(this.statisticURL, this.qs.stringify({
                    searchTime: _this.searchTime,
                    compTime: _this.compTime
                }))
                .then((response) => {
                    if (response.status == 200) {
                        this.getDataSearch(response);
                    } else {
                        this.$message.warning('网络错误!');
                        return;
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        search() {
            let _this = this.headerData;
            this.currentsearchTime = _this.searchTime;
            this.tempCompTime = _this.compTime;
            if (_this.compTime == '' || _this.compTime == null) {
                // 未选择对比时间
                this.comType = 'tableData';
                this.loading = true;
                this.currentPage = 1;
                this.$ajax.post(this.statisticURL, this.qs.stringify({
                        searchTime: _this.searchTime,
                        compTime: _this.compTime,
                        serverId: _this.serverId
                    }))
                    .then((response) => {
                        if (response.status == 200) {
                            this.getDataSearch(response);
                        } else {
                            this.$message.warning('网络错误!');
                            return;
                        }
                        this.loading = false;
                    }).catch((err) => {
                        console.log(err);
                        this.loading = true;
                    });
            } else {
                // 选择对比时间
                this.comType = 'comTableData';
                this.loading = true;
                this.currentPage = 1;
                this.$ajax.post(this.statisticURL, this.qs.stringify({
                        searchTime: _this.searchTime,
                        compTime: _this.compTime,
                        serverId: _this.serverId
                    }))
                    .then((response) => {
                        if (response.status == 200) {
                            this.getDataSearch(response);
                        } else {
                            this.$message.warning('网络错误!');
                            return;
                        }
                        this.loading = false;
                    }).catch((err) => {
                        console.log(err);
                        this.loading = true;
                    });
            }
        },
    },
}
</script>

<style scoped>
.el-loading-spinner {
    top: 20% !important;
}

.el-table thead.is-group th {
    background: none;
}
</style>
